<template>
  <div class="my_swiper">
    <van-swipe v-if="imageData.length > 0" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imageData" @click="goDetail(item)">
        <img :src="env === 'development' ? 'http://10.141.45.15:8082' + item.newsImgPath.split(';')[0] : item.newsImgPath.split(';')[0]"
             alt="" style="width: 100%;height: 100%;vertical-align: middle;">
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="bottom_indicator">
          <div class="title ">
            {{ imageData[active] && imageData[active].conTitle }}
          </div>
          <ul class="custom-indicator">
            <li :class="[active === cur - 1 ? 'active' : '', 'default'].join(' ')" v-for="cur in total">
            </li>
          </ul>
        </div>
      </template>
    </van-swipe>
    <div style="height: 180px; line-height: 180px;" v-else>
      <van-image icon-size="80px">
      </van-image>
    </div>

  </div>
</template>

<script setup lang="ts">
import { INewsRes } from "@/pages/importantNews/type";
import router from "@/router";
import { getEnv } from "@/util";
import { PropType, ref } from "vue";
const props = defineProps({
  imageData: {
    // 他是自定义类型
    type: Object as PropType<Array<INewsRes & {
      newsImg: string
    }>>,
    default: () => ({})
  },
})
const env = ref(getEnv())
function goDetail(item: INewsRes) {
  if (item.linkType == '1') {
    //内部
    router.push('/news-detail/' + item.id)
  } else if (item.linkType == '2') {
    window.location.href = item.linkAddress as string
  }

}
</script>
<style lang="less" scoped>
.my_swiper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  z-index: 10;

  .my_swipe {
    z-index: 8;
  }



  .bottom_indicator {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0px;
    display: flex;
    background-color: rgba(0, 0, 0, .5);
    padding: 12px;
    box-sizing: border-box;

    .title {
      font-size: 13px;
      font-family: PingFangSC-Semibold, PingFang SC;
      padding-right: 0;
      color: white;
      text-align: left;
      width: 80%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .custom-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 2;

      .default {
        width: 5px;
        height: 5px;
        background: #FFFFFF;
        opacity: 0.5;
        border-radius: 50%;
        margin-left: 3px;
      }

      .active {
        opacity: 1;
      }
    }
  }
}
</style>


<style lang="less" >
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
  height: 180px;
}

.my-swipe {
  z-index: 10;

  .van-swipe__indicators {
    left: 90%;
    bottom: 18px;
    z-index: 5;
  }
}
</style>
